<template>
  <div class="bg-white mt-2 p-4 pb-6">
    <div class="flex flex-row justify-between items-center mb-2">
      <p class="text-sm">关联商品售卖</p>
      <van-radio-group v-model="type" direction="horizontal" shape="dot">
        <van-radio :name="category_type" checked-color="#436BFF">商品大类</van-radio>
        <van-radio :name="product_type" checked-color="#436BFF">具体商品</van-radio>
      </van-radio-group>
    </div>

    <div v-if="type === 'category'">
      <p class="text-gray-500 text-xs my-4">当首次接触客户或向客户推荐的商品尚未明确</p>
      <div class="grid grid-cols-3 gap-4">
        <div
          :class="`px-2 py-1 border rounded-md cursor-pointer text-center text-sm ${
            selectedCategorys.includes(category) ? 'text-yxt-blue border-yxt-blue' : ''
          }`"
          v-for="category in categorys"
          @click="onClickCategory(category)"
        >
          {{ category.name }}
        </div>
      </div>
    </div>
    <div v-else>
      <p class="text-gray-500 text-xs my-4">当首次接触客户或向客户推荐的商品尚未明确</p>
      <div
        class="flex flex-row justify-between items-center mb-1 mt-4"
        @click="onClickProducts"
      >
        <p class="text-sm">商品</p>
        <span class="flex flex-row items-center">
          <p class="text-xs w-[180px] text-right mr-2">{{ productsDes }}</p>
          <van-icon name="arrow" size="12" />
        </span>
      </div>
    </div>
    <chooseProduct
      ref="chooseProductRef"
      :categoryId="categorys && categorys[0]?.id"
      @onsubmit="handleSelectProduct"
    />
  </div>
</template>

<script setup>
import { ref, defineEmits, computed, defineExpose, defineProps, watch } from "vue";
import { useOrderVisitStore } from "@/store";
import chooseProduct from "./chooseProduct.vue";

const store = useOrderVisitStore();
const categorys = computed(() => store.salesConfig.categories);

const props = defineProps({
  categoryType: {
    type: Number,
    default: 1,
  },
});

const bindGoodsCategory = computed(() => store.bindGoodsCategory);
const selectedProducts = computed(() => bindGoodsCategory.value.selectedProducts);
const selectedCategorys = computed(() => bindGoodsCategory.value.selectedCategorys);

const category_type = "category";
const product_type = "product";
const type = ref(category_type);

// 在编辑会议时，需要等待网络请求结束才能获取到类型
watch(
  () => props.categoryType,
  (v) => {
    type.value = v === 2 ? product_type : category_type;
  }
);

function onClickCategory(category) {
  if (selectedCategorys.value.includes(category)) {
    let arr = selectedCategorys.value;
    setSelectedCategory(arr.filter((item) => item.name != category.name));
  } else {
    selectedCategorys.value.push(category);
  }
  setSelectedProduct([]);
}

const chooseProductRef = ref();
function onClickProducts() {
  chooseProductRef.value.show();
}

function handleSelectProduct(products) {
  setSelectedCategory([]);
  setSelectedProduct(products);
}

const productsDes = computed(() => {
  if (selectedProducts.value.length === 0) {
    return "请选择商品";
  }
  return selectedProducts.value
    .map((item) => {
      return item.details[0].slice(0, 8);
    })
    .join(",");
});

function setSelectedCategory(v) {
  store.bindGoodsCategory.selectedCategorys = v;
}

function setSelectedProduct(v) {
  store.bindGoodsCategory.selectedProducts = v;
}

defineExpose({
  type,
  selectedCategorys,
  selectedProducts,
});
</script>

<style lang="less" scoped>
/deep/ .van-radio__label {
  font-size: 14px;
}
</style>
